<extend name="Public/base"/>
<block name="style">
	<style type="text/css">
		#banner_list .form-item{ position: relative;background-color: #eee; padding: 10px}
		#banner_list input{ width: 600px;}
		#banner_list .form-item:nth-child(2n){ background-color: #dedede;}
		#banner_list .remove{ position: absolute; right: 0; top: 0}
	</style>
</block>
<block name="body">
	<div class="main-title">
		<h2>Banner配置</h2>
	</div>
	<form action="__SELF__" method="post" class="form-horizontal">

		<div id="banner_list">

		</div>
		<div class="form-item">
			<button type="button" class="btn " id="add_banner">增加选项</button>
		</div>
		<div class="form-item">
			<input type="hidden" name="config_name" value="{$config_name}">
			<button class="btn submit-btn ajax-post" id="submit" type="submit" target-form="form-horizontal">确 定</button>
			<button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
		</div>
	</form>
</block>

<block name="script">
	<script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>

	<script type="text/javascript" src="__STATIC__/arttemplate/template-native.js"></script>
	<script type="text/javascript" src="__STATIC__/arttemplate/template.extend.js"></script>
	<script type="text/html" id="tmpl_banner_item">
		<div class="form-item">
			<label class="item-label">图片<span class="check-tips">（图片网址）</span></label>
			<div class="controls">
				<input type="text" name="value[<%=$data.id%>][img]" value="<%=$data.img%>" class="img_url"/>
				<input type="file" class="upload_img" id="upload_img_<%=$data.id%>">
			</div>

			<label class="item-label">链接地址<span class="check-tips">（网址格式）</span></label>
			<div class="controls">
				<input type="text" name="value[<%=$data.id%>][url]" value="<%=$data.url%>"/>
			</div>
			<div class="remove">X 删除</div>
		</div>
	</script>
	<script type="text/javascript">
		var DATA={$config};

		for(var i = 0 , j = DATA.length ; i < j ; i++ ){
			DATA[i]['id']=i
			var $banner_item=$(template('tmpl_banner_item',DATA[i]));
			$("#banner_list").append($banner_item);
			bind_upload($banner_item.find('.upload_img'));
		}
		function bind_upload($obj){
			$obj.uploadify({
				"height"          : 30,
				"swf"             : "__STATIC__/uploadify/uploadify.swf",
				"fileObjName"     : "download",
				"buttonText"      : "上传图片",
				"uploader"        : "{:U('File/uploadPicture',array('session_id'=>session_id()))}",
				"width"           : 120,
				'removeTimeout'	  : 1,
				'fileTypeExts'	  : '*.jpg; *.png; *.gif;',
				'debug'           : false,
				'multi'           : false,
				"onUploadSuccess" : function(file, data,response){
					var data = $.parseJSON(data);
					var src = '';
					if(data.path){
						$(this.wrapper.selector).closest('.controls').find('.img_url').val(data.path);
					} else {
						alert('上传图片不成功');
					}
				},
				'onFallback' : function() {
					alert('未检测到兼容版本的Flash.');
				},
			});
		}
		$(function(){
			$("#add_banner").click(function(){
				var $banner_item=$(template('tmpl_banner_item',{id:Date.parse(new Date())}));
				$("#banner_list").append($banner_item);
				bind_upload($banner_item.find('.upload_img'));
			});
			$("#banner_list").on('click','.remove',function(){
				$(this).closest('.form-item').remove();
			});
		});
	</script>
</block>
